<!DOCTYPE html>
<html lang="">

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			table{
				border-top: 1px solid #000000;
				border-right: 1px solid #000;
				width: 400px;
				text-align: center;
			}
			th{
				border-left: 1px solid #000;
				border-bottom: 1px solid #000;
			}
			td{
				border-left: 1px solid #000;
				border-bottom: 1px solid #000;
			}
		</style>

		<script src="js/JQuery.min.js"></script>
		<script>
			// function addRow() {
			// 	var fRow = document.getElementById("row3");
			// 	var newRow = document.createElement("tr"); //创建行节点
			// 	var col1 = document.createElement("td"); //创建单元格节点
			// 	col1.innerHTML = "幸福从天而降"; //为单元格添加文本
			// 	var col2 = document.createElement("td");
			// 	col2.innerHTML = "&yen;18.50";
			// 	col2.setAttribute("align", "center");
			// 	newRow.appendChild(col1); //把单元格添加到行节点中
			// 	newRow.appendChild(col2);
			// 	document.getElementById("row1").parentNode.insertBefore(newRow, fRow); //把行节点添加到表格末尾
			// }
			//
			// function updateRow() {
			// 	var uRow = document.getElementById("row1");
			// 	//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
			// 	uRow.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
			// }
			//
			// function delRow() {
			// 	var dRow = document.getElementsByTagName("tr"); //访问被删除的行
			// 	if(dRow[2]!=null){
			// 		dRow[2].parentNode.removeChild(dRow[2]); //删除行
			// 	}
			// }
			//
			// function copyRow() {
			// 	var oldRow = document.getElementById("row3"); //访问复制的行
			// 	var newRow = oldRow.cloneNode(true); //复制指定的行及子节点
			// 	document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
			// }
			$(function(){
				// 添加新的一行
				$(".add").click(function(e){
					// console.info(e);
					var tr = $("<tr class='a'></tr>");
					var book = "<td><input type='text' class='text' id='title'/></td>";
					var num = "<td><input type='text' class='text' id='num'/></td>";
					tr.html(book+num);
					// $("#table").append("<tr>"+book+num+"</tr>");
					$("#table").append(tr);
					tr.slideDown();

					// 回车 键盘事件 保存输入在 input 框中的内容
					$(document).keydown(function(e){
						// console.info(e);
						if(e.key=="Enter"){
							// console.info($("#title").val()+$("#num").val());
							// 运用替换节点 将之前的input框 替换掉
							$(".a").replaceWith("<tr>"+"<td>"+$("#title").val()+"</td>"+"<td>"+"￥"+$("#num").val()+"</td>"+"</tr>");
						};
					});
				});

				// 删除第二行
				$(".remove").on("click",function(){
					// 索引号 2 remove 删除
					$("tr").eq(2).remove();
				});

				// 修改标题样式
				$(".change").click(function(e){
					var book = "<th><input type='text' class='text' id='title1'/></th>";
					var num = "<th><input type='text' class='text' id='num1'/></th>";
					var tr = $("th").parent();
					tr.replaceWith("<tr class='upd ate'>"+book+num+"</tr>");
					$(document).keydown(function(e){
						// console.info(e);
						if(e.key=="Enter"){
							// console.info($("#title").val()+$("#num").val());
							// 运用替换节点 将之前的input框 替换掉
							$(".update").replaceWith("<tr>"+"<th>"+$("#title1").val()+"</th>"+"<th>"+$("#num1").val()+"</th>"+"</tr>");
						};
					});
				})

				// 复制最后一行 添加在最后一行
				$(".cc").click(function(){
					$("#table tr:last").clone(true).appendTo($("table tr:eq(0)").parent());
				});

				// 鼠标移动 高亮显示
				$("tr").mouseover(function(){
					$(this).css("background-color","#ffb3b3").siblings().css("background-color","");
				});
				// 鼠标离开后高亮显示取消
				$("tr").mouseout(function(){
					$(this).css("background-color","");
				});
			})

		</script>
	</head>

	<body>
	<table cellspacing="0" cellpadding="0" id="table">
		<tr>
			<th>书名</th> <th>价格</th>
		</tr>
		<tr>
			<td>看得见风景的房间</td><td>￥30.00</td>
		</tr>
		<tr>
			<td>60个瞬间</td><td>￥32.00</td>
		</tr>
	</table>
	<button type="button" class="add">增加一行</button>
	<button type="button" class="remove">删除第2行</button>
	<button type="button" class="change">修改标题样式</button>
	<button type="button" class="cc">复制最后一行</button>

	</body>

</html>